<template>
	<view class="withdraw">
		<uni-nav-bar left-icon="back" title="余额充值" fixed="true" @clickLeft="goBack"></uni-nav-bar>
		<view class="drawnum">
			<view class="drawtitle">
				请输入充值金额
			</view>
			<view class="searchs">
				<text>￥</text>
				<input class="search-input" v-model="value" type="digit"
					placeholder-style="color:#dedede;font-size:28rpx" placeholder="最低充值额度￥1" />
			</view>
			<view class="drawrule">
				<text>最低充值额度￥1</text>
				<text class="record" @click="goPage('/pagesA/my/account/chargeRecord')">充值记录</text>
			</view>
		</view>

		<button type="primary" class="operate_btn" @click="conform">确定</button>

	</view>
</template>

<script>
	import {
		balancerecharge
	} from "@/api/my/my.js";
	import copyFunc from "@/utils/userCommon.js";
	export default {
		data() {
			return {
				agree: true,
				value: '',
				IS_WEIXIN: false,
			}
		},
		onShow() {
			this.value = '';
		},
		onLoad() {
			this.$store.commit("setPayback", null);
			//#ifdef MP-WEIXIN
			this.IS_WEIXIN = true;
			//#endif
		},
		methods: {
			conform() {
				if (this.value) {
					uni.showLoading({
						title: '加载中..'
					})
					let type = this.IS_WEIXIN ? 1 : 2;
					
					let domain = window.location.origin;
					let back_url = `${domain}/#/pagesA/my/account/balance`; //支付成功回调地址
					// 支付类型 1 小程序 2 H5
					balancerecharge({
						amount: this.value,
						type: type,
						return_url: back_url
					}).then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							if (this.IS_WEIXIN) {
								uni.navigateTo({
									url: `/pages/pay/pay-webview?payUrl=${encodeURIComponent(res.data.pay_url)}`
								});
								this.$store.commit("setPayback", 3);
							}else{
								location.href = res.data.pay_url;
							}
						}
					}).catch(() => {
						uni.hideLoading()
					})
				} else {
					uni.showToast({
						title: '请输入金额',
						icon: 'none'
					})
				}
			},
			// 返回上一页
			goBack() {
				copyFunc.goBack();
			},
			goPage(url) {
				uni.navigateTo({
					url: url,
				});
			},
		}
	}
</script>
<style>
	page {
		background-color: #EFF0F1;
	}
</style>
<style lang="scss" scoped>
	@import '../my.scss';

	.withdraw {
		box-sizing: border-box;
		height: 402rpx;
		background: linear-gradient(135deg, #FC4858 0%, #FD3E44 100%);
		padding-top: 88rpx;
		color: #5E5E5E;

		/deep/ .uni-navbar__header,
		/deep/ .uni-navbar__content,
		/deep/ .uni-icons,
		/deep/ .uni-nav-bar-text {
			background-color: transparent !important;
			color: #FFFFFF !important;
		}

		/deep/ .uni-navbar--border {
			border-bottom-color: transparent !important;
		}

		.drawnum {
			@include cards;
			background: #FFFFFF;
			margin-top: 10rpx;

			.drawtitle {
				color: #5E5E5E;
				font-size: 28rpx;
				margin-bottom: 70rpx;
			}

			.searchs {
				@include flexLayout(center, flex-start);
				border-bottom: 1px solid #EFEFEF;
				padding-bottom: 20rpx;
				margin-bottom: 30rpx;

				.search-input {
					margin-left: 20rpx;
					color: #FC4654;
					font-size: 40rpx;
				}

				.uni-input-placeholder {
					color: #dedede;
					font-size: 28rpx;
				}

				text {
					color: #1B1B1B;
				}
			}

			.drawrule {
				@include flexLayout(center, space-between);
				font-size: 24rpx;

				.record {
					color: #84B065;
				}
			}
		}

		.operate_btn {
			width: 76%;
			margin: 240rpx 12%;
			background: linear-gradient(360deg, #EE4629 0%, #EE653A 100%);
			box-shadow: 0px 20rpx 36rpx 0px rgba(238, 73, 43, 0.25);
			border-radius: 42rpx;
		}

	}
</style>
